<template>
  <ScrollView
    class="search-view-comp"
    style="height: 100%"
    :status="scrollViewStatus"
    @load="
      () => {
        search(false)
      }
    "
  >
    <!-- 正在加载 -->
    <div class="loading" v-if="loading">
      <div class="bar">loading...</div>
      <div class="flex flex-cc p-10" v-for="(v, i) in 2" :key="i">
        <div class="sk-circle">
          <n-skeleton circle></n-skeleton>
        </div>

        <div class="flex-1">
          <div class="sk-round mb-10">
            <n-skeleton round></n-skeleton>
          </div>

          <div class="sk-round">
            <n-skeleton round></n-skeleton>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果 -->
    <div class="result" v-else>
      <!-- 好友 -->
      <div>
        <div class="bar">好友搜索结果</div>

        <ul v-if="friendList?.length">
          <li
            class="friend hover-item flex flex-cc"
            v-for="(v, i) in friendList"
            :key="i"
          >
            <div class="mr-10">
              <BaseImage class="kang-avatar" :src="v.headPic"></BaseImage>
            </div>

            <div class="flex-1">
              <div>{{ v.friendAlias || v.userName }}</div>
              <div class="fz-12 cl-blue">{{ v.account }}</div>
            </div>
          </li>
        </ul>

        <n-empty class="mt-15 mb-15" description="暂无数据" v-else></n-empty>
      </div>

      <!-- 聊天记录 -->
      <div>
        <div class="bar">聊天记录搜索结果</div>

        <ul>
          <li
            class="message hover-item flex flex-cc"
            v-for="(v, i) in messageList"
            :key="i"
          >
            <div class="mr-10">
              <BaseImage
                class="kang-avatar"
                :src="result?.msgRes?.extInfo[v.sender]?.headPic"
              ></BaseImage>
            </div>

            <div class="flex-1 mr-10">
              <div>
                {{
                  result?.msgRes?.extInfo[v.sender]?.friendAlias ||
                  result?.msgRes?.extInfo[v.sender]?.userName
                }}
              </div>
              <div class="fz-12 cl-basic hide-1">{{ v.searchableContent }}</div>
            </div>

            <div class="fz-10 cl-second">
              {{ dayjs(v.timestamp).format('MM/DD') }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </ScrollView>
</template>

<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import api from '@/kang/js/api'

const props = defineProps(['keyword'])

const result = ref({})
const friendList = ref([])
const messageList = ref([])
const current = ref(1)
const pageSize = ref(10)
const scrollViewStatus = ref(0)
const loading = ref(false)
const timer = ref(null)

watch(
  () => props.keyword,
  () => {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      search(true)
      clearTimeout(timer.value)
    }, 300)
  },
  {
    immediate: true,
  }
)

// 全局搜索
async function search(isRefresh = false) {
  if (!props.keyword.trim()) {
    result.value = {}
    loading.value = false
    clearTimeout(timer.value)
    return
  }

  try {
    // 刷新
    if (isRefresh) {
      current.value = 1
      loading.value = true
    }

    if (!isRefresh && scrollViewStatus.value !== 0) {
      return
    }

    const params = {
      keyword: props.keyword,
      current: current.value,
      pageSize: pageSize.value,
    }

    scrollViewStatus.value = 1
    const { code, data } = await api.search(params)
    loading.value = false

    if (code === 200) {
      result.value = data

      // 好友列表
      friendList.value = data?.friendList

      // 消息列表
      messageList.value = isRefresh
        ? data?.msgRes?.list
        : [...messageList.value, ...data?.msgRes?.list]

      if (messageList.value?.length === 0) {
        scrollViewStatus.value = 4
      } else if (messageList.value?.length < data?.msgRes?.total) {
        scrollViewStatus.value = 0
      } else {
        scrollViewStatus.value = 2
      }

      current.value += 1
    } else {
      scrollViewStatus.value = 3
    }
  } catch (err) {
    loading.value = false
    scrollViewStatus.value = 3
  }
}
</script>

<style lang="scss" scoped>
.search-view-comp {
  background-color: var(--color-white);

  .loading {
    .sk-circle {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .sk-round {
      width: 100%;
      height: 25px;
      margin-right: 10px;
    }

    :deep(.n-skeleton) {
      width: 100%;
      height: 100%;
    }
  }

  .result {
    .friend,
    .message {
      padding: 10px;
    }
  }

  .bar {
    padding: 5px;
    background-color: var(--color-bg);
    color: var(--color-basic);
    font-size: 13px;
  }
}
</style>
